<template>
	<view>
		<view class="wrap">

			<view class="line-box">
				<view class="line-item u-flex">
					<view class="tit">贷款金额</view>
					<view class="inner u-flex">
						<input class="input" v-model="commercialLoanAmount" type="number" placeholder="0"/>
					</view>
					<text class="unit">万</text>
				</view>
			</view>
			
			<view class="line-box">
				<view class="line-item u-flex">
					<view class="tit">贷款年限</view>
					<view class="inner">
						<picker @change="pickerChange($event,'yearIndex')" :value="yearIndex" :range="years">
							<view class="input">{{ years[yearIndex] }}年</view>
						</picker>
					</view>
					<text class="iconfont icon-jiantouyou"></text>
				</view>
			</view>
			
			<view class="line-box">
				<view class="line-item u-flex">
					<view class="tit">贷款利率</view>
					<view class="inner u-flex">
						<input class="input" type="digit" v-model="commercialLoanRate" placeholder="请输入贷款利率"/>
					</view>
					<text class="unit">%</text>
				</view>
			</view>
			
			<view class="line-box">
				<view class="line-item u-flex">
					<view class="tit">首次还款时间</view>
					<view class="inner">
						<picker @change="pickerChange($event,'refundDate')" mode="date" fields="month">
							<view class="input">{{refundDate}}</view>
						</picker>
					</view>
					<text class="iconfont icon-jiantouyou"></text>
				</view>
			</view>
			
			<view class="line-box" style="border-bottom: 0;">
				<view class="line-item u-flex">
					<view class="tit">还款方式</view>
					<view class="inner">
						<picker @change="pickerChange($event,'refundIndex')" :value="refundIndex" :range="refundData">
							<view class="input">{{ refundData[refundIndex] }}</view>
						</picker>
					</view>
					<text class="iconfont icon-jiantouyou"></text>
				</view>
			</view>
		</view>
		
		<view class="wrap" style="border-top: 14rpx solid #f4f4f4;">
			<view class="line-box">
				<view class="line-item u-flex">
					<view class="tit">提前还款时间</view>
					<view class="inner">
						<picker @change="pickerChange($event,'refundDate2')" mode="date" fields="month">
							<view class="input">{{refundDate2}}</view>
						</picker>
					</view>
					<text class="iconfont icon-jiantouyou"></text>
				</view>
			</view>
			<view class="line-box">
				<view class="line-item u-flex">
					<view class="tit">提前还款方式</view>
					<view class="inner">
						<view class="input">{{refType[refTypeIndex]}}</view>
						<!-- <picker @change="pickerChange($event,'refTypeIndex')" :value="refTypeIndex" :range="refType">
							<view class="input">{{refType[refTypeIndex]}}</view>
						</picker> -->
					</view>
					<!-- <text class="iconfont icon-jiantouyou"></text> -->
				</view>
			</view>
			
			<template v-if="refTypeIndex != 0">
				<view class="line-box">
					<view class="line-item u-flex">
						<view class="tit">还款额度</view>
						<view class="inner u-flex">
							<input class="input" v-model="commercialLoanAmount2" type="digit"/>
						</view>
						<text class="unit">万</text>
					</view>
				</view>
				<view class="line-box">
					<view class="line-item u-flex">
						<view class="tit">新的贷款利率</view>
						<view class="inner u-flex">
							<input class="input" v-model="commercialLoanRate2" type="digit"/>
						</view>
						<text class="unit">%</text>
					</view>
				</view>
				
				<view class="line-box">
					<view class="line-item u-flex">
						<view class="tit">新的还款类型</view>
						<view class="inner">
							<picker @change="pickerChange($event,'refundIndex2')" :value="refundIndex2" :range="refundData">
								<view class="input">{{refundData[refundIndex2]}}</view>
							</picker>
						</view>
						<text class="iconfont icon-jiantouyou"></text>
					</view>
				</view>
				
				<view class="line-box">
					<view class="line-item u-flex">
						<view class="tit">新的还款方案</view>
						<view class="inner">
							<picker @change="pickerChange($event,'planIndex')" :value="planIndex" :range="planData">
								<view class="input">{{planData[planIndex]}}</view>
							</picker>
						</view>
						<text class="iconfont icon-jiantouyou"></text>
					</view>
				</view>
			</template>
		</view>
		
		<view class="btn-box">
			<u-button shape="circle" type="primary" @click="calculate">开始计算</u-button>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			years: [30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
			yearIndex:0,//年限
			refundIndex:0,//还款方式
			refundData:['等额本息','等额本金'],
			commercialLoanRate:'',//旧利率
			commercialLoanAmount:'',//贷款金额
			refundDate:this.$u.date(null,'yyyy-mm'),//首次还款时间
			refundDate2:this.$u.date(null,'yyyy-mm'),//提前还款时间
			refType:['一次性还清','部分提前还款'],//方案
			refTypeIndex:'0',
			commercialLoanRate2:4.9,//新利率
			commercialLoanAmount2:'',//新金额
			refundIndex2:0,//还款方式2
			planData:['月供基本不变','还款期限不变'],
			planIndex:0,//新还款方案
		};
	},
	methods: {
		pickerChange(e,key) {
			this[key] = e.detail.value;
		},
		calculate() {
			if((this.commercialLoanAmount) <= 0){
				uni.showToast({
					icon:'none',
					title:'必须输入贷款金额'
				})
				return
			}
			if((this.commercialLoanRate) <= 0){
				uni.showToast({
					icon:'none',
					title:'必须输入贷款利率'
				})
				return
			}
			
			let datas={
				oldmoney:this.commercialLoanAmount,
				oldyear:this.years[this.yearIndex],
				oldlilv:this.commercialLoanRate/100,
				oldtype:this.refundIndex,//还款方式 0 '等额本息','等额本金'
				olddate:this.refundDate,
				// 新还款
				newdate:this.refundDate2,
				newplan:this.refTypeIndex,//方案  0 '一次性还清','部分提前还款'
				newtype:this.refundIndex2,//还款方式 0 '等额本息','等额本金'
				newmoney:this.commercialLoanAmount2,//新还款
				newlilv:this.commercialLoanRate2/100,
				newplan2:this.planIndex,//新方案 0 '月供基本不变','还款期限不变'
				
				title:'提前还款'
			}
			uni.navigateTo({
				url:'/pages/more/forward-refund-result?datas=' + encodeURIComponent(JSON.stringify(datas))
			})
		}
	}
};
</script>

<style lang="scss">
	.wrap{padding: 0 40rpx;}
	.line-box{border-bottom: 1rpx solid #ececec;
		.line-item{padding: 25rpx 0;
			.tit{font-size: 30rpx;color: #111;font-weight: bold;white-space: nowrap;width: 300rpx;}
			.unit{font-size: 30rpx;color: #111;font-weight: bold;white-space: nowrap;}
			.iconfont{color: #606266;}
			.inner{margin-right: auto;justify-content: flex-end;width: 100%;
				.input{width: 100%;text-align: right;padding-right: 20rpx;}
			}
		}
		.lpr-info{margin-bottom: 25rpx;background-color: #ffe6e6;padding: 15rpx;
			.date{background-color: $tc;color: #fff;font-size: 24rpx;border-radius: 6rpx;margin-right: 18rpx;padding: 4rpx 16rpx;}
			.info{margin-right: auto;font-size: 24rpx;}
			.history{color: $tc;white-space: nowrap;font-weight: bold;}
		}
	}
	.btn-box{padding: 120rpx 40rpx 0;}
</style>
